<template>
  <div class="forewarn-detail">
    <div class="alert" v-if="alert">
      <div class="alert-item">
        当前"<span>汉城景区</span>"景区交通<span>拥堵</span>
        <div class="go-forewarn" @click="goForewarn">确定</div>
      </div>
    </div>
    <div class="forewarn-item">
      <div class="forewarn-hander">
        <div class="forewarn-title">消 息 预 警</div>
        <div class="forewarn-close" @click="close">
          <img src="../../../public/imgs/关闭.png" />
        </div>
      </div>
      <div class="forewarn-box">
        <div class="fore-mon" v-if="foreMon">
          <div class="fore-mon-title">{{ forewarnTraffic }}拥挤道路监控</div>
          <div class="fore-mon-box">
            <div class="fore-mon-left">
              <video :src="monurl" autoplay muted controls></video>
            </div>
            <div class="fore-mon-right">
              <div class="fore-mon-text">解决方案</div>
              <p>1. 优化城市规划：通过合理的城市规划和设计，优化交通流线，减少不必要的交通拥堵。</p>
              <p>2. 推广分时上班：错峰上下班可以缓解高峰时段的交通压力。</p>
              <p>3. 建立智能交通系统：利用先进的信息技术，建立智能交通系统，提高道路通行效率。</p>
              <p>4. 加强公共交通建设：加大公共交通建设的投入，提高公共交通的服务质量和覆盖率。</p>
            </div>
          </div>
          <div class="close-fore-moin" @click="closeMoin">
            <img src="../../../public/imgs/关闭1.png" />
          </div>
        </div>
        <div class="forewarn-left">
          <!-- 景区新增投诉 -->
          <div class="complain">
            <div class="complain-title">
              <div class="complain-title-text">
                <img src="../../../public/imgs/箭头.png" />
                景区新增投诉
              </div>
            </div>
            <LeftTables></LeftTables>
          </div>
          <!-- 景区新增舆情 -->
        </div>
        <div class="forewarn-center">
          <!-- 景区客流超载预警 -->
          <div class="passenger">
            <div class="passenger-title">
              <div class="passenger-title-text">
                <img src="../../../public/imgs/箭头.png" />
                景区客流超载预警
              </div>
              <div class="complain-title-select">
                <label for="region-select" class="select-label">选择景区:</label>
                <div class="bgiselect">
                  <select id="region-select" v-model="forewarnPassenger" @change="CZList" class="custom-select">
                    <option v-for="region in regions" :key="region.value" :value="region.value"
                      class="custom-select large-font-select">{{ region.label }}</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="passenger-hander">
              <div class="passenger-hander-item">
                当前园区总人数:<span>{{ peopleNum }}</span>人
              </div>
              <div class="passenger-hander-item">
                当前园可承载人数: <span>{{ residual_capacity }}</span>人
              </div>
            </div>
            <div class="passenger-content">
              <DetailCon22 :scenic="forewarnPassenger" />
            </div>
          </div>
          <!-- 景区交通拥堵预警  -->
          <div class="traffic">
            <div class="traffic-title">
              <div class="traffic-title-text">
                <img src="../../../public/imgs/箭头.png" />
                景区交通拥堵预警
              </div>
              <div class="complain-title-select">
                <label for="region-select" class="select-label">选择景区:</label>
                <div class="bgiselect">
                  <select id="region-select" v-model="forewarnTraffic" @change="YDList" class="custom-select">
                    <option v-for="region in regions" :key="region.value" :value="region.value"
                      class="custom-select large-font-select">{{ region.label }}</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="traffic-content">
              <DetailCon23 :traffic="forewarnTraffic" />
              <div class="content-right">
                <div class="right-traffic-num">
                  景区停车位总数：<span>{{ trafficNum }}</span>
                </div>
                <div class="right-traffic-spare">
                  景区停车位空闲数：<span>{{ trafficSpare }}</span>
                </div>
                <div class="right-traffic-occupied">
                  景区停车位占用数：<span>{{ trafficOccupied }}</span>
                </div>
                <!-- <div class="right-traffic-patency">
                  景区交通拥堵情况：
                  <span :style="{ color: trafficPatency === '拥挤' ? '#f30' : '' }">
                    {{ trafficPatency }}
                  </span>
                </div> -->
                <div class="right-traffic-fastigium">
                  景区交通高峰期：<span>{{ traffic_conditions_text }}</span>
                </div>
                <div class="right-traffic-blessing">祝您出行平安！</div>
                <div class="right-traffic-chakan" v-if="trafficPatency === '拥挤'" @click="goMoin">
                  查看
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="forewarn-right">
          <!-- 景区天气预警 -->
          <div class="climate">
            <div class="climate-title">
              <div class="climate-title-text">
                <img src="../../../public/imgs/箭头.png" />
                天气预警
              </div>
            </div>
            <div class="forewarn-weather" :style="{ color: '#fff', fontSize: '24px', fontWeight: '600' }">
              今日
              <span :class="{
                'good-weather': ['晴', '阴', '多云'].includes(forewarnWeather),
                'bad-weather': !['晴', '阴', '多云'].includes(forewarnWeather)
              }">
                {{ forewarnWeather }}
              </span>
              <span v-if="!['晴', '阴', '多云'].includes(forewarnWeather)">
                ,天气较差,出行请注意安全!!!
              </span>
              <span v-else>,天气良好,祝您出行愉快!!!</span>
            </div>
            <div class="synoptic">
              <div class="synoptic-item">
                <div class="synoptic-img">
                  <img :src="require(`../../../public/imgs/天气.png`)" />
                </div>
                <div class="synoptic-text">
                  <div class="synoptic-title">天气</div>
                  <div class="synoptic-content">{{ weatherlis.forewarnWeather }}</div>
                </div>
              </div>
              <div class="synoptic-item">
                <div class="synoptic-img">
                  <img :src="require(`../../../public/imgs/风力.png`)" />
                </div>
                <div class="synoptic-text">
                  <div class="synoptic-title">风力</div>
                  <div class="synoptic-content">{{ weatherlis.fengxiang }}</div>
                </div>
              </div>
              <div class="synoptic-item">
                <div class="synoptic-img">
                  <img :src="require(`../../../public/imgs/降水量.png`)" />
                </div>
                <div class="synoptic-text">
                  <div class="synoptic-title">降雨量</div>
                  <div class="synoptic-content"> {{ weatherlis.jiangshuiliang }}</div>
                </div>
              </div>
              <div class="synoptic-item">
                <div class="synoptic-img">
                  <img :src="require(`../../../public/imgs/温度.png`)" />
                </div>
                <div class="synoptic-text">
                  <div class="synoptic-title">温度</div>
                  <div class="synoptic-content">{{ weatherlis.wendu }}℃</div>
                </div>
              </div>
              <div class="synoptic-item">
                <div class="synoptic-img">
                  <img :src="require(`../../../public/imgs/湿度-1.png`)" />
                </div>
                <div class="synoptic-text">
                  <div class="synoptic-title">湿度</div>
                  <div class="synoptic-content">{{ weatherlis.shidu }}</div>
                </div>
              </div>
              <div class="synoptic-item">
                <div class="synoptic-img">
                  <img :src="require(`../../../public/imgs/气压.png`)" />
                </div>
                <div class="synoptic-text">
                  <div class="synoptic-title">气压</div>
                  <div class="synoptic-content">{{ weatherlis.qiya }}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 景区景点人员拥挤预警 -->
          <div class="crowded">
            <div class="crowded-title">
              <div class="crowded-title-text">
                <img src="../../../public/imgs/箭头.png" />
                景区人员拥挤预警
              </div>
              <div class="complain-title-select">
                <label for="region-select" class="select-label">选择景区:</label>
                <div class="bgiselect">
                  <select id="region-select" v-model="forewarnCrowded" @change="updateContent" class="custom-select">
                    <option v-for="region in regions" :key="region.value" :value="region.value"
                      class="custom-select large-font-select">{{ region.label }}</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="sights">
              <DetailCon24 :crowded="forewarnCrowded" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import LeftTables from './LeftTables.vue';
import DetailCon22 from './DetailCon22.vue';
import DetailCon23 from './DetailCon23.vue';
import DetailCon24 from './DetailCon24.vue';

export default {
  props: ['Dialog'],
  data() {
    return {
      regions: [
        { label: '中国汉城', value: 1 },
        { label: '白竹园寺景区', value: 2 },
        { label: '石雕大观园', value: 3 },
        { label: '唐梓山景区', value: 4 },
        { label: '熊河风景区', value: 5 },
        { label: '无量台景区', value: 6 },
        { label: '白水寺景区', value: 7 },
      ],
      forewarnCrowded: 1,
      monurl: '', // 道路监控地址
      foreMon: false,
      alert: false,
      forewarn: false, // 消息预警
      trafficNum: '1000',
      trafficSpare: '265',
      trafficOccupied: '735',
      trafficPatency: '拥挤',
      traffic_conditions_text: '',
      forewarnTraffic: 1,
      peopleNum: '3379', // 景区人数
      residual_capacity: '',
      forewarnPassenger: 1,
      forewarnComplain: 1, // 新增投诉
      forewarnClimate: 1,
      forewarnWeather: '晴',
      weatherlis: {}, // 天气预警数据
      tousu: [
      ],
    };
  },
  components: {
    // DetailCon21,
    DetailCon22,
    DetailCon23,
    DetailCon24,
    LeftTables,
  },
  mounted() {
    // 数据初始化代码
  },
  created() {
    // this.gerWeather()
    this.TSList()
    this.CZList()
    this.YDList()
  },
  methods: {
    // 获取景区投诉
    TSList() {
      this.$axios.post('/api/forewarning/sceneryComplain', {
        scenery_id: this.forewarnComplain
      })
        .then(res => {
          const data = res.data.data;
          this.tousu = data
        })
        .catch(error => {
          console.error('Failed to fetch chart data:', error);
        });
    },
    // 获取景区客流超载预警
    CZList() {
      this.$axios.post('/api/forewarning/passengerOverloadWarning', {
        scenery_id: this.forewarnPassenger
      })
        .then(res => {
          console.log(res, 'woshi1dhsoajhdsoujahdoso')
          const data = res.data.data;
          this.peopleNum = data.total_num
          this.residual_capacity = data.residual_capacity
        })
        .catch(error => {
          console.error('Failed to fetch chart data:', error);
        });
    },    // 获取景区交通拥堵预警
    YDList() {
      this.$axios.post('/api/forewarning/trafficCongestionWarning', {
        scenery_id: this.forewarnTraffic
      })
        .then(res => {
          const data = res.data.data;
          this.trafficNum = data.total_parking_spaces
          this.trafficSpare = data.free_parking_spaces
          this.trafficOccupied = data.used_parking_spaces
          this.trafficPatency = data.traffic_conditions
          this.traffic_conditions_text = data.traffic_conditions_text
        })
        .catch(error => {
          console.error('Failed to fetch chart data:', error);
        });
    },    // 获取景区投诉
    // TSList() {
    //   this.$axios.post('/api/forewarning/sceneryComplain', {
    //     scenery_id: this.forewarnComplain
    //   })
    //     .then(res => {
    //       const data = res.data.data;
    //       this.tousu = data
    //       console.log(this.tousu);
    //     })
    //     .catch(error => {
    //       console.error('Failed to fetch chart data:', error);
    //     });
    // },
    // 获取天气接口
    gerWeather() {
      this.$axios.get('/api/weather/getWeather')
        .then(res => {
          const data = res.data.data;
          this.weatherlis = data
          if (data.wendu >= 0) {
            this.weather = Math.ceil(data.wendu)
          } else if (data.tem < 0) {
            this.weather = Math.floor(data.wendu)
          }
        })
        .catch(error => {
          console.error('Failed to fetch chart data:', error);
        });
        // this.$axios.get('https://restapi.amap.com/v3/weather/weatherInfo?city=420683&key=07299acebf9c8865e3ec6e2173017435')
        // .then(res => {
        //   console.log(res)
        //   const data = res.lives[0];
        //   this.weatherlis = data
        // })
        // .catch(error => {
        //   console.error('Failed to fetch chart data:', error);
        // });
    },
    close() {
      this.$parent.close();
    },
    closeMoin() {
      this.foreMon = false;
    },
    goForewarn() {
      // 预警操作代码
      this.alert = false
    },
    goMoin() {
      this.foreMon = true;
    },
  },
};
</script>
  
  
<style lang="scss" scoped>
.forewarn {
  cursor: pointer;
  position: absolute;
  top: 55px;
  right: 115px;
}

.xiaoxi-img {
  width: 32px;
  height: 32px;
  background-image: url('../../../public/imgs/消息red.png');
  animation: glint 1s infinite;
}

// 选择景区 
.select-label {
  padding-top: 3px;
  color: #fff;
  font-size: 14px;
}

.bgiselect {
  width: 135px;
  height: 31px;
  background-image: url('/public/imgs/no-choose.png');
  background-size: 100% 100%;
  background-position: top;
  border: none;
  outline: none;
  background-color: transparent;
  position: relative;
}

.custom-select {
  padding-left: 20px;
  width: 135px;
  height: 31px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: none;
  font-size: 15px;
  font-weight: bold;
  background-color: transparent;
  background-image: url('/public/imgs/KRRaN1s537.png'); // 添加自定义下拉箭头图片
  background-repeat: no-repeat;
  background-position: right 10px center; // 调整箭头位置
  background-size: 12px 12px; // 调整箭头大小
}

.large-font-select {
  font-size: 12px !important;
  color: #000 !important;

  option {
    font-size: 10px;
  }
}

.news-num {
  position: absolute;
  top: -3px;
  right: 0;
  color: #fff;
  background-color: #f30;
  font-size: 16px;
  padding: 0px 5px;
  border-radius: 10px;
}

.forewarn-box {
  width: 100%;
  display: flex;
  justify-content:space-around;
  flex-direction: row;
  .forewarn-left{
    width: 500px;
  }
  .forewarn-center{
    width: 500px;
  }
  .forewarn-center{
    width: 500px;
  }
}

.forewarn-detail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  z-index: 99;
}

.forewarn-item {
  width: 1620px;
  height: 800px;
  padding: 10px;
  background-color: rgba(21, 36, 85, 0.9);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.forewarn-hander {
  margin-top: 30px;
  margin-bottom: 20px;
  position: relative;
}

.forewarn-title {
  font-size: 48px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  word-spacing: 20px;
}

.forewarn-close {
  position: absolute;
  top: -20px;
  right: 50px;
  cursor: pointer;
}

.complain {
  width: 400px;
}

.complain-title {
  display: flex;
  align-items: center;
  padding: 10px;
}

.complain-title-text {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 14px;
}

.complain-title-select {
  outline: none;
  border: none;
  border-radius: 10px;
  padding: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.complain-item-hander {
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(3, 118, 177, 0.4);

}

.complain-item-text {
  width: 137px;
  text-align: center;
  font-size: 24px;
  color: #fff;
}

.complain-item-list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 100%;
  line-height: 1.4;
}

.complain-list-item {
  color: #fff;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100px;
  font-size: 14px;
  background-color: rgba(29, 124, 221, 0.2);
}

.complain-item-list:nth-child(2n) {
  background-color: rgba(187, 234, 249, 0.208);

}

/* 景区新增舆情 */
.consensus {
  margin-top: 20px;
}

.consensus-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.consensus-title-text {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 14px;
}

/* 景区客流超载预警 */
.passenger {
  width: 500px;
}

.passenger-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.passenger-title-text {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 14px;
}

.passenger-title-select>select {
  outline: none;
  border: none;
  border-radius: 10px;
  padding: 5px;
}

/*  景区客流超载预警 */
.passenger-hander {
  font-size: 14px;
  color: #fff;
  display: flex;
}

.passenger-hander-item {
  margin-left: 10px;
}

.passenger-hander-item>span {
  font-size: 24px;
  color: #90754a;
  font-weight: 600;
}

/*  景区交通拥堵预警 */
.traffic {
  width: 500px;
  margin-top: 30px;
}

.traffic-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.traffic-title-text {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 14px;
}

.traffic-title-select>select {
  outline: none;
  border: none;
  border-radius: 10px;
  padding: 5px;
}

.traffic-content {
  display: flex;
  align-items: center;
}

.content-right {
  font-size: 14px;
  color: #fff;
}

.right-traffic-num {
  margin-bottom: 10px;
}

.right-traffic-num>span {
  font-size: 14px;
  color: rgba(243, 227, 84, 1);
  font-weight: 600;
}

.right-traffic-spare {
  margin-bottom: 10px;
}

.right-traffic-spare>span {
  font-size: 14px;
  color: rgba(243, 227, 84, 1);
  font-weight: 600;
}

.right-traffic-occupied {
  margin-bottom: 10px;
}

.right-traffic-occupied>span {
  font-size: 14px;
  color: rgba(243, 227, 84, 1);
  font-weight: 600;
}

.right-traffic-patency {
  margin-bottom: 10px;
}

.right-traffic-patency>span {
  font-size: 14px;
  color: rgb(32, 207, 5);
  font-weight: 600;
}

.right-traffic-fastigium {
  margin-bottom: 10px;
}

.right-traffic-fastigium>span {
  font-size: 14px;
  color: rgba(243, 227, 84, 1);
  font-weight: 600;
}

.right-traffic-blessing {
  font-size: 14px;
  color: rgb(230, 167, 42);
  font-weight: 600;
}

.right-traffic-chakan {
  width: 50px;
  padding: 5px;
  text-align: center;
  border-radius: 10px;
  background-color: #f30;
  cursor: pointer;
  margin-left: 190px;
}

/* 景区天气预警 */
.climate {
  width: 500px;
}

.climate-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.climate-title-text {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 14px;
}

.climate-title-select>select {
  outline: none;
  border: none;
  border-radius: 10px;
  padding: 5px;
  font-size: 14px;
}

/* 天气预警 */
.synoptic {
  display: flex;
  flex-wrap: wrap;
}

.synoptic-item {
  display: flex;
  align-items: center;
  width: 120px;
  margin-top: 35px;
  margin-right: 10px;
}

.synoptic-img {
  padding: 10px;
  border: 2px solid #02e7f6;
  border-radius: 50px;
  box-shadow: 0 0 10px #02e7f6 inset;
}

.synoptic-img>img {
  width: 30px;
}

.synoptic-text {
  margin-left: 10px;
  font-size: 14px;
  font-weight: 600;
}

.synoptic-title {
  margin-bottom: 5px;
  color: #fff;
}

.synoptic-content {
  color: #4a9c9c;

}

/*景区景点人员拥挤预警  */
.crowded {
  widows: 500px;
  margin-top: 100px;
}

.crowded-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.crowded-title-text {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 14px;
}

.crowded-title-select>select {
  outline: none;
  border: none;
  border-radius: 10px;
  padding: 5px;
}

.vrC {
  position: absolute;
  top: 63%;
  right: 15%;
  background-color: #2F80ED;
  font-size: 24px;
  padding: 5px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.vrC>span {
  text-decoration: none;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

.vr {
  position: absolute;
  top: 63%;
  right: 3%;
  background-color: #2F80ED;
  font-size: 24px;
  padding: 5px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.vr>a {
  text-decoration: none;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}


.alert {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.alert-item {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #2F80ED;
  color: #fff;
  padding: 50px;
  padding-bottom: 30px;
  transform: translate(-50%, -50%);
  font-size: 32px;
  border-radius: 10px;
}

.alert-item>span {
  color: #f30;
}

.go-forewarn {
  padding: 10px;
  border-radius: 10px;
  background-color: #f30;
  margin-left: 314px;
  color: #fff;
  font-size: 24px;
  margin-top: 50px;
  text-align: center;
  cursor: pointer;
}

.close-goforewarn {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.center-box {
  cursor: default;
}

.good-weather {
  color: rgb(74, 194, 154);
  font-size: 32px;
}

.bad-weather {
  color: #f30;
  font-size: 32px;
}

.zhegai {
  width: 68px;
  height: 23px;
  background-color: #051628;
  position: absolute;
  top: 59px;
  right: 34px;
}

.fore-mon {
  width: 1200px;
  height: 600px;
  padding: 50px;
  background-color: #314ca6;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  border-radius: 20px;
}

.fore-mon-title {
  font-size: 48px;
  color: #fff;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;

}

.fore-mon-box {
  display: flex;
}

.fore-mon-text {
  text-align: center;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
}

.fore-mon-right {
  padding: 0 10px;
  font-size: 14px;
  color: #fff;
  overflow-y: auto;
  margin-left: 15px;
}

.fore-mon-right>p {
  margin-bottom: 10px;
}

.close-fore-moin {
  position: absolute;
  top: 25px;
  right: 25px;
  cursor: pointer;
}
</style>